import { Table, Divider, Popconfirm, Button, Icon, message, Modal, Input} from 'antd';
import { connect } from "dva";
import {useState,useEffect} from 'react';
import Link from 'umi/link';
import { createStore, combineReducers } from "redux";

function searchUsers(props) {
	window.scrollTo(0,0)
	const [visible,setVisible] = useState(false)
	let value1 ="";
	let value2 ="";
	let value3 ="";
	const handleCancel=()=>{
		setVisible(false)
		props.history.go(0)
	}
	const [coss,setCoss] = useState(0)
	useEffect(()=>{
		console.log(props.location.query.id)
		const fetchData = async () =>props.dispatch(
			{
				type:'info/getuserData',
				payload:{
					pre:10,
					page:1,
					userName:props.location.query.id,
					nickName:''
				}
			},
		) 
		fetchData(); 
	},[coss])
	
	const data=[]
	for (let i = 0; i < props.pages; i++) {
		props.list.map(item=>
		data.push({
			index: i,
			key: item._id,
			userName: item.userName,
			nickName:item.nickName,
			updatedAt: item.updatedAt,
		}))
	}
	console.log(data)
	
	const columns = [
	  {
	    title: '用户名',
	    dataIndex: 'userName',
	  },
	  {
	    title: '昵称',
	    dataIndex: 'nickName',
	  },
	 
	  {
	    title: '注册时间',
	    dataIndex: 'time',
	  },
	  {
	    title: '操作',
	    render: (text, record) => (
	      <span>
	        <a onClick={()=>props.dispatch({
				type:'info/getUserInfo',
				payload:{
					id:record.key
				}
				}).then(()=>{
					setVisible(true)
				})}>修改</a>
	        <Divider type="vertical" />
	        <a onClick={()=>props.dispatch({
				type:'info/deleteUser',
				payload:{
					id:record.key
				}
				}).then(()=>{
					message.success('删除成功~');
					setCoss(() => {
					    return (coss+1);
					  })
				})
			}>删除</a>
	      </span>
	    ),
	  },
	];
	
	const total={
	  columns:columns,
	  dataSource: data,
	  pagination: {
	    pageSize:10,
	    current: props.current,
	    total:props.count,
	    onChange: (page) => props.dispatch(
			{
				type:'info/getuserData',
				payload:{
					pre:10,
					page,
					userName:props.location.query.id,
					nickName:''
				}
			},
		) 
	  }
	}
	
  return (
	<div>
		<h1 style={{position:'relative',}}>搜索结果 <Link to="/home/userList"><Button type="primary" style={{position:'absolute',right:0,top:0}}>返回</Button></Link></h1>
		<Table {...total} />
		<Modal
		    title="修改"
		    visible={visible}
		    onOk={()=>props.dispatch({
				type:'info/editUser',
				payload:{
					id:props.id,
					userName:value1.state.value,
					nickName:value2.state.value,
					avatar:value3.state.value
				}
			}).then(()=>{
				setVisible(false)
				if(props.id){
					message.success('修改成功~')
					setCoss(() => {
						return (coss+1);
					})
					setTimeout(function() {
						props.history.go(0)
					},0);
				}
			})}
		    onCancel={handleCancel}
			okText="确认"
			cancelText="取消"
		>
		    用户名:<Input defaultValue={props.userName} type="text" style={{height:40,margin:10}} ref={(val) =>value1 = val} />
		    昵称:<Input defaultValue={props.nickName} type="text" style={{height:40,margin:10}} ref={(val) =>value2 = val} />
		    头像:<Input defaultValue={props.avatar} type="text" style={{height:40,margin:10}} ref={(val) =>value3 = val} />
		</Modal>
	</div>
  )
}

export default connect(state=>state.info)(searchUsers)
